<template>
  <view class="service-comment container">
    <!-- 综合评分 -->
    <view class="total">
      <view class="box box-between">
        <view class="rate text-center">
          <uni-rate :rate="info.avgspeed || 0"></uni-rate>
          <view class="fz-12 mt-5">
            <text class="mr-5">工作速度</text>
            <text class="cl-main">{{info.avgspeed || 0}}</text>
          </view>
        </view>
        <view class="rate text-center">
          <uni-rate :rate="info.avgattitude || 0"></uni-rate>
          <view class="fz-12 mt-5">
            <text class="mr-5">工作质量</text>
            <text class="cl-main">{{info.avgattitude || 0}}</text>
          </view>
        </view>
        <view class="rate text-center">
          <uni-rate :rate="info.avgquality || 0"></uni-rate>
          <view class="fz-12 mt-5">
            <text class="mr-5">工作态度</text>
            <text class="cl-main">{{info.avgquality || 0}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 评论列表 -->
    <view class="mt-20">
      <!-- 好评率 -->
      <view class="total fz-15 bold mb-10">
        <text class="mr-10">好评率</text>
        <text class="cl-main">{{info.feedbackRete || 0}}%</text>
      </view>

      <!-- 列表 -->
      <view class="list" v-if="info.commentList.length">
        <view
          class="item border border-bottom"
          v-for="(item, index) in info.commentList"
          :key="index"
        >
          <uni-comment-item :item="item">
            <view class="rate" slot="topRight">
              <uni-rate :rate="item.attitude_score"></uni-rate>
            </view>
          </uni-comment-item>
        </view>
      </view>

      <!-- 无数据 -->
      <uni-load-more :status="5" v-else></uni-load-more>
    </view>
  </view>
</template>

<script>
import uniRate from "@/components/rate";
import uniCommentItem from "@/components/commentItem";
import uniLoadMore from "@/components/loadMore";

export default {
  name: "serviceComment",

  props: {
    info: {
      type: Object,
      default: {}
    }
  },

  components: {
    uniRate,
    uniCommentItem,
    uniLoadMore
  }
};
</script>

<style lang="scss" scoped>
</style>
